<template>
	<view class="flex-col page">
		<view class="flex-col flex-auto relative group">
			<image src="/static/Pendant.png" class="group_2" mode="" v-if="data.content.is_on==1 && isTimeInRange(businessTime[0], businessTime[1])"></image>
			<image src="/static/Pendant1.png" class="group_2" mode="" v-else></image>
			<view class="swiper" v-if="data.swiperurl.length>0">
				<swiper :autoplay="true" :interval="4000" :duration="500" @change="onChange">
					<swiper-item v-for="(item,index) in data.swiperurl" :key="index">
						<view class="swiper-item">
							<image :src="item.abs_url+ '?t=' + Date.now()" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
				<view class="swiper_dots">
					{{(data.currentSwiper+1)+'/'+data.swiperurl.length}}
				</view>
			</view>
			<view class="flex-col relative section_4">
				<view class="flex-row justify-between">
					<view class="flex-row items-center space-x-8">
						<text class="font_2">{{data.content.shop_name}}</text>
						<image class="shrink-0 image_9" v-if="data.content.is_license==1" src="/static/success.png" />
					</view>
					<view class="flex-row space-x-15">
						<image class="image_7" src="/static/share.png" @click="toShare" />
						<image class="image_8" src="/static/with_ac.png" v-if="data.content.is_coll==1"
							@click="toCollect" />
						<image class="image_8" src="/static/with.png" v-else @click="toCollect" />
					</view>
				</view>
				<view class="flex-row items-center group_4">
					<view class="flex-row" v-for="item in 5" :key="item">
						<image class="image_11" src="/static/level_ac.png" mode="" v-if="data.content.score>=item">
						</image>
						<image class="image_11" src="/static/level.png" mode="" v-else></image>
					</view>
					<text class="text_8">{{data.content.score}}</text>
					<text class="font_3 text_6">人均</text>
					<text class="font_3 text_9">￥{{data.content.avg_amounts}}</text>
					<text class="font_3 text_7">销售</text>
					<text class="font_3 text_10">{{data.content.sales}}</text>
				</view>
				<view class="justify-start items-center self-start flex-row" style="margin-top: 10rpx;">
					<view class="text-tips" v-for="(item,index) in data.content.tags" :key="index">
						
						<text class="font_6 text_11">{{item}}</text>
					</view>
				</view>
				<view class="self-start group_5">
					<text class="font_7 text_12">营业时间：</text>
					<text class="font_7 text_13">{{data.content.business_time}}</text>
				</view>
			</view>
			<view class="flex-row relative section_5">
				<view class="flex-col items-center justify-center relative group_6" @click="toOption(0)">
					<text :class="data.detail==0?'font_8':'font_9'">商家服务</text>
					<view class="section_6" v-if="data.detail==0"></view>
				</view>
				<!-- <view class="flex-col items-center justify-center relative group_6" @click="toOption(1)">
					<text :class="data.detail==1?'font_8':'font_9'">用户评价</text>
					<view class="section_6" v-if="data.detail==1"></view>
				</view> -->
				<view class="flex-col items-center justify-center relative group_6" @click="toOption(2)">
					<text :class="data.detail==2?'font_8':'font_9'">商家详情</text>
					<view class="section_6" v-if="data.detail==2"></view>
				</view>
			</view>
			<view class="" v-if="data.detail==0">
				<view class="flex-col list space-y-20">
					<view class="flex-row items-center list-item" @click.stop="toDetail(item.service_id)"
						v-for="(item, index) in data.list" :key="index">
						<image class="shrink-0 image_13" :src="item.cover" />
						<view class="flex-col flex-auto group_7">
							<view class="flex-row justify-between">
								<text class="font_8 text_17">{{item.service_name}}</text>
								<text class="self-end font_10">{{item.term}}分钟</text>
							</view>
							<view class="flex-col justify-start items-center self-start text-wrapper_2">
								<text class="font_11">{{item.category}}</text>
							</view>
							<view class="flex-row justify-between items-end">
								<view class="flex-col">
									<view class="flex-row items-baseline group_9 space-x-14">
										<view class="group_10">
											<text class="font_5">￥</text>
											<text class="font_4">{{item.price}}</text>
										</view>
										<text class="font_12 text_18"
											v-if="item.price!=item.market_price">￥{{item.market_price}}</text>
									</view>
									<text class="self-start font_6 text_19">销量{{item.sales}}</text>
								</view>
								<view class="flex-col justify-center items-center text-wrapper_3 button_2"
									@click.stop="toOrder(item.service_id)">
									<text class="font_13">购买</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="rate" v-if="data.detail==1">
				<view class="rateTop flex-row items-center justify-start ">
					<view class="flex-row justify-center items-end rateNum">
						<text>{{data.content.score}}</text>
						<text>分</text>
					</view>
					<view class="line"></view>
					<!-- <u-rate v-model="data.content.score" :readonly="true" activeColor="#FF4200" :allowHalf="true" size="22"></u-rate> -->
					<view class=" flex-col">
						<view class="score">{{data.content.count}}人评分</view>
						<view class="flex-row">
							<view class="flex-row" v-for="item in 5" :key="item">
								<image class="image_11" src="/static/level_ac.png" mode=""
									v-if="data.content.score>=item"></image>
								<image class="image_11" src="/static/level.png" mode="" v-else></image>
							</view>
						</view>
					</view>
				</view>
				<u-gap height="10" bgColor="#F8F8F8"></u-gap>
				<view class="rates flex-col">
					<view class="ratesTop flex-row items-center">
						<view class="ratesItem flex-row justify-center items-center" :class="data.type==''?'active':''"
							@click="getEvalua(0)">全部</view>
						<view class="ratesItem flex-row justify-center items-center"
							:class="data.type=='new'?'active':''" @click="getEvalua(1)">最新</view>
						<view class="ratesItem flex-row justify-center items-center"
							:class="data.type=='favourable'?'active':''" @click="getEvalua(2)">好评</view>
						<view class="ratesItem flex-row justify-center items-center"
							:class="data.type=='bad'?'active':''" @click="getEvalua(3)">差评</view>
					</view>
					<view class="" v-if="data.evaluateList.length>0">
						<view class="ratelist flex-row" v-for="(item,index) in data.evaluateList" :key="index">
							<image :src="item.avatar" mode=""></image>
							<view class="ratelistMain">
								<view class="ratelistTop flex-row justify-between">
									<view class="">
										<text>{{item.nickname}}</text>
										<view class=" flex-row" v-if="item.score>0">
											<view class="flex-row" v-for="item1 in 5" :key="item1">
												<image class="image_11" src="/static/level_ac.png" mode=""
													v-if="item.score>=item1"></image>
												<image class="image_11" src="/static/level.png" mode="" v-else></image>
											</view>
										</view>
										<view class="font_3" v-else>暂无评价</view>
									</view>
									<text class="time">{{item.create_time}}</text>
								</view>
								<text class="rateText" v-if="item.content!=''">{{item.content}}</text>
								<view class="flex-row rateImage" v-if="item.pictures.length>0">
									<image :src="item1.abs_url" v-for="(item1,index1) in item.pictures" :key="index1"
										:style="(index1+1)%3==0?'margin-right: 0rpx;':''" mode=""></image>
								</view>
								<view class="reply" v-if="item.reply&&item.reply!=''">
									店家回复：{{item.reply}}
								</view>
							</view>
						</view>
					</view>
					<view class="flex-row justify-center items-center evalu" v-else>
						暂无评价
					</view>
				</view>
			</view>
			<view class="flex-col" v-if="data.detail==2">
				<view class="information flex-row justify-between items-center" style="margin-top: 20rpx;"
					@click="toIMage(1)">
					<image src="/static/image1.png" mode=""></image>
					<text>店内详情</text>
					<image src="/static/more1.png" mode=""></image>
				</view>
				<view class="information flex-row justify-between items-center" @click="toIMage(2)">
					<image src="/static/image2.png" mode=""></image>
					<text>资质证明</text>
					<image src="/static/more1.png" mode=""></image>
				</view>
				<view class="information flex-row justify-between items-center" style="margin-top: 20rpx;"
					@click="toIMage(3)">
					<image src="/static/image3.png" mode=""></image>
					<text>举报</text>
					<image src="/static/more1.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onLaunch,
		onReachBottom,
		onShareAppMessage,
		onShareTimeline
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive,
		nextTick,
		onMounted,
		watch,
		onBeforeUnmount,
		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	let interval
	const music = uni.createInnerAudioContext();
	const isFirstLoad = ref(true)
	onMounted(() => {
		console.log("onMounted");
		// if (isFirstLoad.value) {
		// 	uni.redirectTo({
		// 		url: '/pages/businessDetail/businessDetail?shop_id=' + data.value.shop_id // 替换为当前页面的路径
		// 	});
		// 	isFirstLoad = false; // 标记为已加载，防止重复执行
		// }
	})
	onLoad((option) => {
		console.log(option);
		if (option.invite_id) {
			console.log(option.invite_id);
			uni.setStorageSync('invite_id', option.invite_id)
		}
		data.value.shop_id = option.shop_id
		// if (!uni.getStorageSync('member_id')) {
		// 	uni.navigateTo({
		// 		url: '/pages/login/login'
		// 	})
		// }
		getDate()
		getList()
		// const isFirstLoad = !uni.getStorageSync('hasDetail')
		// if (isFirstLoad) {
		// 	console.log("12345");
		// 	uni.setStorageSync('hasDetail', true)
		// 	uni.redirectTo({
		// 		url: '/pages/businessDetail/businessDetail?shop_id=' + data.value.shop_id // 替换为当前页面的路径
		// 	})
		// }
		// nextTick(()=>{
		// 	console.log("location-----");
		// 	location.reload()
		// })
	})
	onShow(() => {

	})
	onShareAppMessage((res) => {
		console.log("好友", res);
		return {
			title: data.value.content.share_data.title, //分享的名称
			mpId: 'wxfcd2d4938f27f8d9', //此处配置微信小程序的AppId
			path: '/pages/buyingDetail/buyingDetail?shop_id=' + data.value.shop_id + '&invite_id=' + data
				.value.content.share_data.invite_id,
			imageUrl: data.value.content.share_data.cover,
			success(res) {
				console.log(res, '分享成功');
			},
			fail(res) {
				console.log(res, '分享成功');
			}
		}
	})
	onShareTimeline((res) => {
		console.log("朋友圈", res);
		return {
			title: data.value.content.share_data.title, //分享的名称
			path: '/pages/buyingDetail/buyingDetail?shop_id=' + data.value.shop_id + '&invite_id=' + data
				.value.content.share_data.invite_id,
			imageUrl: data.value.content.share_data.cover,
			success(res) {
				console.log(res, '分享成功');
			},
			fail(res) {
				console.log(res, '分享成功');
			}
		}
	})
	onBeforeUnmount(() => {

	})
	onReachBottom(() => {
		console.log("上拉");
		data.value.p++
		getList()
	})
	let data = ref({
		shop_id: '',
		content: {
			avatar: '',
			line: 40,
			shoplist: [{
				province_name: "",
				city_name: "",
				district_name: "",
				address: "",
				distance: ""
			}],
			enterprise_info: {},
			alert: [{
				abs_url: ''
			}]
		},
		list: [],
		swiperurl: [],
		currentSwiper: '',
		detail: 0,
		p: 1,
		pages: false,
		evaluateList: [],
		type: 0,
		isVip: 0
	})
	const businessTime = ref([])

	const getDate = () => {
		proxy.$req.requestPOST(proxy.$api.ShopInfo.getDetail, {
			member_id: uni.getStorageSync('member_id') || '',
			shop_id: data.value.shop_id,
		}).then(res => {
			data.value.content = res.data
			if (res.data.pictures.length > 0) {
				data.value.swiperurl = res.data.pictures
			}
			if (res.flag == "success") {
				if(res.data.business_time && res.data.business_time != ''){
					businessTime.value = res.data.business_time.split('-')
				}
			}
		})
		proxy.$req.requestPOST(proxy.$api.CenterInfo.getInfo, {
			member_id: uni.getStorageSync('member_id')
		}).then(res => {
			if (res.flag == "success") {
				data.value.isVip = res.data.vip
			}
		})

	}
	const getList = () => {
		if (data.value.detail == 0) {
			proxy.$req.requestPOST(proxy.$api.ShopInfo.serviceList, {
				shop_id: data.value.shop_id,
				p: data.value.p
			}).then(res => {
				if (res.flag == "success") {
					data.value.list = [...data.value.list, ...res.data.list]
				}
			})
		} else if (data.value.detail == 1) {
			proxy.$req.requestPOST(proxy.$api.ShopInfo.evaluateList, {
				shop_id: data.value.shop_id,
				type: data.value.type,
				p: data.value.p
			}).then(res => {
				if (res.flag == "success") {
					data.value.evaluateList = [...data.value.evaluateList, ...res.data.list]
				}
				
			})
		}
		nextTick(()=>{
			console.log("businessDetail");
			proxy.$forceUpdate()
		})
	}
	const getEvalua = (num) => {
		if (num == 1) {
			data.value.type = 'new'
		} else if (num == 2) {
			data.value.type = 'favourable'
		} else if (num == 3) {
			data.value.type = 'bad'
		} else {
			data.value.type = ''
		}
		data.value.p = 1
		data.value.evaluateList.length = 0
		getList()
	}

	const toOption = (num) => {
		data.value.detail = num
		data.value.p = 1
		data.value.evaluateList.length = 0
		data.value.list.length = 0
		getList()
	}

	const onChange = (e) => {
		data.value.currentSwiper = e.detail.current
	}

	const toShare = () => {
		let url = window.location.href + '&invite_id=' + data.value.content.share_data.invite_id
		uni.setClipboardData({
			data: url,
			success: function() {
				console.log('success');
				uni.showToast({
					title: '链接已复制到剪切板',
					icon: 'none'
				})
			}
		});
	}
	const toCollect = () => {
		proxy.$req.requestPOST(proxy.$api.CenterInfo.setCollect, {
			shop_id: data.value.shop_id,
			member_id: uni.getStorageSync('member_id') || '',
		}).then(res => {
			uni.showToast({
				title: res.message,
				icon: "none"
			})
			if (res.flag == "success") {
				if (data.value.content.is_coll == 1) {
					data.value.content.is_coll = 0
				} else {
					data.value.content.is_coll = 1
				}
			}
		})
	}
	const toIMage = (num) => {
		// let time =data.value.content.business_time.split('-')
		// let isTime= isTimeInRange(time[0], time[1])
		// if (data.value.content.is_on == 1) {
		if (num == 1) {
			uni.navigateTo({
				url: '/pages/busDetail/busDetail?shop_id=' + data.value.shop_id
			})
		} else if (num == 2) {
			uni.navigateTo({
				url: '/pages/imageUrl/imageUrl?shop_id=' + data.value.shop_id + "&type=1"
			})
		} else {
			uni.navigateTo({
				url: '/pages/report/report?shop_id=' + data.value.shop_id
			})
		}
		// } else {
		// 	uni.showToast({
		// 		title: "商家未营业",
		// 		icon: "error"
		// 	})
		// }

	}
	const isTimeInRange = (startTime, endTime) => {
		const now = new Date();
		const start = new Date();
		const end = new Date();

		start.setHours(startTime.split(':')[0], startTime.split(':')[1], 0, 0);
		end.setHours(endTime.split(':')[0], endTime.split(':')[1], 0, 0);

		// 如果开始时间晚于结束时间，则将范围分为两个部分判断
		if (start > end) {
			// 当前时间在00:00到结束时间或开始时间到23:59之间
			return now >= start || now <= end;
		} else {
			// 当前时间在开始时间到结束时间之间
			return now >= start && now <= end;
		}
	}
	const toOrder = (service_id) => {

		if (data.value.isVip == 1) {
			let time = data.value.content.business_time != '' ? data.value.content.business_time.split('-') : ''
			let isTime = time != '' ? isTimeInRange(time[0], time[1]) : false
			if (data.value.content.is_on == 1 && isTime) {
				uni.navigateTo({
					url: '/pages/order/order?service_id=' + service_id
				})
			} else {
				uni.showToast({
					title: "商家未营业",
					icon: "error"
				})
			}

		} else {
			uni.showToast({
				title: '您还不是会员无法购买服务',
				icon: "none"
			})
		}

	}
	const toDetail = (service_id) => {
		uni.navigateTo({
			url: '/pages/serviceDetail/serviceDetail?service_id=' + service_id
		})
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #f8f8f8;
		width: 100%;
		// overflow-y: auto;
		// overflow-x: hidden;
		min-height: 100vh;

		button {
			border: 0 !important;
			outline: none !important;
			// margin: 0 !important;
			padding: 0 !important;
			background-color: #fff !important;
		}

		button::after {
			border: 0 !important;
			height: 100% !important;
		}

		.group {

			// padding-bottom: 88rpx;
			// overflow-y: auto;
			.swiper {
				width: 100%;
				position: relative;

				/* position: absolute;
				top: 20rpx;
				margin-left: 5%; */
				::v-deep swiper {
					height: 566rpx;
				}

				.swiper-item {
					width: 100%;
					height: 100%;

					>image {
						width: 100%;
						height: 100%;
					}
				}


				.swiper_dots {
					width: 100%;
					height: 36rpx;
					padding-right: 20rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					flex-direction: row;
					position: absolute;
					bottom: 29px;
				}

				.dot {
					width: 8rpx;
					height: 8rpx;
					border-radius: 7.5rpx;
					margin-right: 15rpx;
					background-color: #00BCE5;
				}
			}




			.group_2 {
				width: 98rpx;
				height: 100rpx;
				position: absolute;
				top: 0;
				right: 30rpx;
				z-index: 100;
			}

			.space-y-385 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-top: 385rpx;
				}
			}

			.section_4 {
				margin-top: -30rpx;
				padding: 48rpx 30rpx 94rpx;
				background-color: #ffffff;
				border-radius: 40rpx 40rpx 0px 0px;

				.space-x-8 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 8rpx;
					}

					.font_2 {
						font-size: 36rpx;
						font-family: PingFangSC;
						line-height: 34rpx;
						color: #333333;
					}

					.image_9 {
						width: 24rpx;
						height: 28rpx;
					}
				}

				.space-x-15 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 15rpx;
					}

					.image_7 {
						width: 32rpx;
						height: 32rpx;
						display: block;
					}

					.image_8 {
						width: 34rpx;
						height: 32rpx;
					}
				}

				.group_4 {
					margin-top: 31rpx;

					.image_10 {
						width: 53rpx;
						height: 22rpx;
					}

					.image_11 {
						margin-left: 5rpx;
						width: 24rpx;
						height: 22rpx;
					}

					.image_12 {
						margin-left: 5rpx;
					}

					.text_8 {
						margin-left: 13rpx;
						color: #f52c2c;
						font-size: 26rpx;
						font-family: Bahnschrift;
						line-height: 32rpx;
					}

					.text_6 {
						margin-left: 36rpx;
					}

					.text_9 {
						margin-left: 6rpx;
					}

					.text_7 {
						margin-left: 35rpx;
					}

					.text_10 {
						margin-left: 6rpx;
					}
				}

				.text-wrapper {
					margin-top: 20rpx;
					padding: 8rpx 0;
					background-color: #eff5f0;
					border-radius: 6rpx;
					width: 80rpx;

					.text_11 {
						color: #54bc6e;
					}
				}

				.group_5 {
					margin-top: 29rpx;
					line-height: 25rpx;

					.font_7 {
						font-size: 26rpx;
						font-family: PingFang SC;
					}

					.text_12 {
						color: #999999;
						line-height: 25rpx;
					}

					.text_13 {
						color: #333333;
						line-height: 20rpx;
					}
				}
			}

			.font_3 {
				font-size: 24rpx;
				font-family: PingFang SC;
				line-height: 23rpx;
				color: #666666;
			}

			.section_5 {
				margin-top: -58rpx;
				padding: 0 30rpx;

				background-color: #ffffff;

				.group_6 {
					padding: 25rpx 0;
					margin-right: 60rpx;
					// height: 80rpx;

					.text_14 {
						font-size: 33rpx;
						line-height: 32rpx;
					}

					.font_9 {
						font-size: 32rpx;
						font-family: PingFang SC;
						line-height: 34rpx;
						color: #999999;
					}
				}

				.space-x-64 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 64rpx;
					}
				}

				.section_6 {

					background-color: #54bc6e;
					background-image: linear-gradient(-90deg, #54bc6e 0%, #00a796 100%),
						linear-gradient(-90deg, #cf000e 0%, #ffcd55 100%);
					border-radius: 4rpx;
					width: 66rpx;
					height: 8rpx;
					position: absolute;
					bottom: 0rpx;
				}
			}

			.list {
				padding: 30rpx 30rpx 34rpx;

				.list-item {
					padding: 32rpx 16rpx 32rpx 30rpx;
					background-color: #ffffff;
					border-radius: 20rpx;

					.image_13 {
						border-radius: 20rpx;
						width: 196rpx;
						height: 196rpx;
					}

					.group_7 {
						margin-left: 15rpx;

						.text_17 {
							margin-left: 6rpx;
						}

						.text-wrapper_2 {
							margin-left: 5rpx;
							margin-top: 18rpx;
							padding: 8rpx;
							background-color: #f0f0f0;
							border-radius: 6rpx;
							// width: 80rpx;

							.font_11 {
								font-size: 22rpx;
								font-family: PingFangHeiTC;
								line-height: 21rpx;
								color: #333333;
							}
						}

						.group_9 {
							margin-top: 34rpx;

							.group_10 {
								line-height: 25rpx;
								height: 26rpx;
							}

							.font_12 {
								font-size: 22rpx;
								font-family: PingFangHeiTC;
								line-height: 17rpx;
								color: #9c9b9a;
							}

							.text_18 {
								text-decoration: line-through;
							}
						}

						.space-x-14 {

							&>view:not(:first-child),
							&>text:not(:first-child),
							&>image:not(:first-child) {
								margin-left: 14rpx;
							}
						}

						.text_19 {
							margin-left: 5rpx;
							margin-top: 19rpx;
						}
					}

					.font_10 {
						font-size: 24rpx;
						font-family: PingFangHeiTC;
						line-height: 23rpx;
						color: #999999;
					}

					.text-wrapper_3 {
						// align-self: flex-start;
						// margin-top: 100rpx;

						.font_13 {
							font-size: 26rpx;
							font-family: PingFangSC;
							line-height: 25rpx;
							color: #fff;
						}
					}

					.button_2 {
						// padding: 14rpx 0;
						background-color: #54bc6e;
						background-image: linear-gradient(270deg, #00a76e 0%, #54bc6e 100%),
							linear-gradient(0deg, #00a796 0%, #54bc6e 100%), linear-gradient(0deg, #00a796 0%, #0fd758 100%),
							linear-gradient(0deg, #01a793 0%, #0fd758 100%);
						border-radius: 16rpx;
						width: 128rpx;
						height: 54rpx;
					}
				}
			}

			.space-y-20 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-top: 20rpx;
				}
			}

			.font_8 {
				font-size: 32rpx;
				font-family: PingFangSC;
				line-height: 31rpx;
				color: #333333;
			}

			.font_5 {
				font-size: 24rpx;
				font-family: PingFangSC;
				line-height: 19rpx;
				color: #ff3333;
			}

			.font_4 {
				font-size: 32rpx;
				font-family: PingFangSC;
				line-height: 25rpx;
				color: #ff3333;
			}

			.font_6 {
				font-size: 22rpx;
				font-family: PingFangHeiTC;
				line-height: 21rpx;
				color: #999999;
			}
		}

		.rate {
			.image_11 {
				margin-left: 5rpx;
				width: 26rpx;
				height: 24rpx;
			}

			// overflow-x: auto;
			.rateTop {
				height: 170rpx;
				background-color: #fff;

				.rateNum {
					margin-left: 36rpx;

					>text {
						&:nth-child(1) {
							font-size: 88rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #FF8900;
							text-align: center;
							line-height: 88rpx;
						}

						&:nth-child(2) {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #FF8900;
							line-height: 26rpx;
							// margin-top: 10rpx;
						}
					}
				}

				.line {
					width: 1rpx;
					height: 68rpx;
					background: #CACACA;
					margin: 0 40rpx;
				}

				.level {
					width: 42rpx;
					height: 40rpx;
					margin: 0 10rpx;
				}

				.level1 {
					width: 21rpx;
					height: 38rpx;
				}
			}

			.score {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #666666;
				margin-bottom: 14rpx;
			}

			.rates {
				.image_11 {
					margin-left: 5rpx;
					width: 26rpx;
					height: 24rpx;
				}

				background-color: #fff;

				.ratesTop {
					height: 104rpx;
					padding-left: 32rpx;

					.ratesItem {
						width: 100rpx;
						height: 50rpx;
						background: #EEF8F0;
						border-radius: 16rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #666666;
						margin-right: 24rpx;
					}

					.active {
						background: linear-gradient(135deg, #00A76E, #54BC6E);
						color: #FFFFFF;
					}
				}

				.evalu {
					font-size: 27rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;
					margin-top: 30rpx;
					margin-bottom: 30rpx;
				}

				.ratelist {
					padding: 30rpx;
					border-bottom: 2rpx solid #F7F7F7;

					>image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-right: 17rpx;
					}

					.ratelistMain {
						width: 86%;
						margin-top: 5rpx;

						.ratelistTop {
							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;

							.level {
								width: 22rpx;
								height: 22rpx;
								margin-right: 8rpx;
								margin-top: 8rpx;
							}

							.level1 {
								width: 11rpx;
								height: 22rpx;
							}

							.time {
								font-size: 22rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #999999;
							}
						}

						.rateText {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #333333;
							margin-top: 20rpx;
							margin-bottom: 10rpx;
						}

						.rateImage {
							flex-wrap: wrap;
							margin-top: 10rpx;

							>image {
								width: 186rpx;
								height: 186rpx;
								border-radius: 20rpx;
								margin-right: 17rpx;
							}
						}

						.reply {
							width: 594rpx;
							// height: 132rpx;
							background: #F7F7F7;
							border-radius: 10rpx;
							padding: 20rpx;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #666666;
							margin-top: 15rpx;
						}
					}
				}
			}
		}

		.information {
			border-bottom: 2rpx solid #F8F8F8;
			padding: 24rpx 30rpx;
			background-color: #fff;

			>image {
				&:nth-child(1) {
					width: 34rpx;
					height: 34rpx;
				}

				&:nth-child(3) {
					width: 10rpx;
					height: 18rpx;
				}
			}

			>text {
				width: 89%;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}
	}
	.text-tips{
		padding: 8rpx;
		background-color: #eff5f0;
		border-radius: 6rpx;
		margin-right: 10rpx;
	}
</style>